<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/rest.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_3246975_r7ow77w0bdn.css">
    <script src="../js/rest.js"></script>
    <style>
        .w {
            width: 1226px;
            margin: 0 auto;
        }

        .header {
            background-color: #f5f5f5;
        }

        .header .header-nav {
            height: 40px;
            line-height: 40px;
        }

        .header .header-nav .header-nav-l,
        .header .header-nav .header-nav-r {
            font-size: 12px;
            display: flex;
        }

        .header .header-nav li {
            padding-right: 20px;
        }

        .header .header-nav .header-nav-l {
            float: left;
        }

        .header .header-nav .header-nav-r {
            float: right;
        }

        .header .header-nav .header-nav-l .hide {
            display: none;
        }

        .sign-tips a:first-child,
        .sign-user a:first-child {
            margin-right: 5px;
        }

        .banner {
            height: 400px;
            margin-top: 10px;
            background-color: #6f6f6f;
        }

        /* 商品展示 */
        .goods-list {
            width: 1226px;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            font-size: 12px;
            margin-top: 20px;
        }

        .goods-list li {
            width: 20%;
            box-sizing: border-box;
            padding: 5px 10px;
        }

        .goods-list li:hover {
            box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.4);
        }

        .goods-list li img {
            width: 80%;
            display: block;
            margin: 0px auto;
            margin-top: 10px;
        }

        .price {
            line-height: 32px;
            color: #e43981;
        }

        .desc {
            line-height: 24px;
            /* 老版本弹性盒 */
            display: -webkit-box;
            /* 超出两行隐藏 */
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* 搜索 */
        .search-site {
            margin-top: 20px;
            display: flex;
            font-size: 13px;
        }

        .search-site .searchBar {
            width: 240px;
            height: 30px;
            border: 1px solid #dfdfdf;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .search-site .searchBar .searchCon {
            border: none;
            width: 210px;
            text-indent: 5px;
        }

        .search-site .searchBar .searchBtn {
            width: 30px;
            height: 30px;
            font-size: 20px;
            text-align: center;
            line-height: 30px;
            color: #dfdfdf;
        }

        .orderColBox,
        .orderTypeBox {
            height: 30px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding: 0 20px;
            margin-left: 20px;

            border: 1px solid #dfdfdf;
        }

        .orderColBox>label>input,
        .orderTypeBox>label>input {
            display: none;
        }

        .orderColBox>label+label,
        .orderTypeBox>label+label {
            margin-left: 20px;
        }

        .orderColBox>label>input:checked+span,
        .orderTypeBox>label>input:checked+span {
            color: red;
        }

        .showNum {
            margin-left: 20px;
            height: 30px;
            border-color: #dfdfdf;
            outline: none;
            box-sizing: content-box;
        }

        .reset {
            height: 30px;
            margin-left: 20px;
            width: 40px;
            border: 1px solid #dfdfdf;
            /* background-color: tranparent; */
        }

        /* 页码 */
        .page-site {
            height: 40px;
            line-height: 40px;
            margin-top: 20px;
        }

        .page-site .page-wrap {
            display: flex;
            width: fit-content;
            margin: 0 auto;
            font-size: 13px;
        }

        .page-site .page-wrap .prev,
        .page-site .page-wrap .next {
            padding: 0 20px;
        }

        .page-site .page-wrap .tips {
            width: 60px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="header">
        <div class="header-nav w">
            <ul class="header-nav-l">
                <li>湖北</li>
                <li class="sign-tips">
                    <a href="./login.html">亲,请登录</a>
                    <a href="./register.html">免费注册</a>
                </li>
                <li class="sign-user hide">
                    <a href="javascript:;" class="lg-user">欢迎您,xxx</a>
                    <a href="javascript:;" class="exit">退出登录</a>
                </li>
            </ul>
            <ul class="header-nav-r">
                <li><a href="./index.html">我的淘宝</a></li>
                <li><a href="./shoppingCar.html">购物车</a></li>
                <li><a href="">收藏夹</a></li>
            </ul>
        </div>
    </div>
    <div class="container w">
        <form class="search-site" onsubmit="return false">
            <div class="searchBar">
                <input type="text" class="searchCon">
                <i class="iconfont icon-sousuo searchBtn"></i>
            </div>
            <div class="orderColBox">
                <!-- <div class="orderCol" data-val="id"></div>
                <div class="orderCol" data-val="goodsName"></div>
                <div class="orderCol" data-val="goodsPrice"></div> -->
                <label>
                    <input type="radio" class="orderCol" name="orderCol" value="id" checked>
                    <span>默认</span>
                </label>
                <label>
                    <input type="radio" class="orderCol" name="orderCol" value="goodsName">
                    <span>名称</span>
                </label>
                <label>
                    <input type="radio" class="orderCol" name="orderCol" value="goodsPrice">
                    <span>价格</span>
                </label>
            </div>
            <div class="orderTypeBox">
                <label>
                    <input type="radio" class="orderType" name="orderType" value="asc" checked>
                    <span>升序</span>
                </label>
                <label>
                    <input type="radio" class="orderType" name="orderType" value="desc">
                    <span>降序</span>
                </label>
            </div>
            <select class="showNum">
                <option value="10">每页显示10条</option>
                <option value="20">每页显示20条</option>
                <option value="30">每页显示30条</option>
                <option value="40">每页显示40条</option>
            </select>
            <input type="reset" class="reset" value="重置">
        </form>
        <ul class="goods-list">
            <!-- <li>
                <a href="">
                    <img src="https://img12.360buyimg.com/n7/jfs/t1/42776/10/17345/131277/626bc1e3Eb2b0278a/1dc51316f3dc1898.jpg.avif"
                        alt="">
                    <div class="price">￥4499.00</div>
                    <div class="desc">笔记本电脑MateBook D 14 2022款 14英寸 11代酷睿 i5 16G+512G 锐炬显卡 轻薄本/护眼全面屏 银</div>
                </a>
            </li> -->
        </ul>
        <div class="page-site">
            <div class="page-wrap">
                <div class="prev">上一页</div>
                <div class="tips">1/20</div>
                <div class="next">下一页</div>
            </div>
        </div>
    </div>
</body>
<script>
    var signTips = document.getElementsByClassName("sign-tips")[0]
    var signUser = document.getElementsByClassName("sign-user")[0]
    var goodsList = document.getElementsByClassName("goods-list")[0]
    var outUserName = signUser.getElementsByClassName('exit')[0]

    var showNum = document.getElementsByClassName("showNum")[0]
    var searchSite = document.getElementsByClassName('search-site')[0]
    var pageNext = document.getElementsByClassName('next')[0]
    var pagePrev = document.getElementsByClassName('prev')[0]
    var tips = document.getElementsByClassName("tips")[0]
    var wd = urlParamsParse().wd ? urlParamsParse().wd : ''
    var col = "id"
    var type = "asc"
    var page = 1
    var size = 10
    var maxPage = null
    goodsLoad()
    searchSite.addEventListener('click', clickSearch)
    function clickSearch(e) {
        var e = e || window.event
        var target = e.target
        if (target.classList.contains('searchBtn')) {
            wd = target.previousElementSibling.value
            goodsLoad()
        } else if (target.className == 'orderCol') {
            col = target.value
            goodsLoad()
        } else if (target.className == 'orderType') {
            type = target.value
            goodsLoad()
        } else if (target.className == "reset") {
            wd = ""
            col = "id"
            type = "asc"
            page = 1
            size = 10
            goodsLoad()
        }
    }
    showNum.onchange = function () {
        size = this.value
        goodsLoad()
    }
    pageNext.onclick = function () {
        page++
        goodsLoad()
    }
    pagePrev.onclick = function () {
        if (page <= 1) {
            alert("已经是第一页了")
            return false
        }
        page--
        goodsLoad()
    }
    function goodsLoad() {
        ajax({
            type: 'get',
            dataType: 'json',
            data: {
                wd,
                col,
                type,
                page,
                size
            },
            url: 'http://43.138.81.225/demo/php/searchGoodsOrderLimit.php',
            callback: function (data) {
                console.log(data)
                var { status, message, list, total, maxPage, current } = data
                if (data.status) {
                    var html = ""
                    list.forEach((item) => {
                        var { goodsId, goodsName, goodsPrice, goodsImg } = item
                        html += `<li>
                                    <a href="./goodsData.html?gid=${goodsId}">
                                        <img src="${goodsImg}"
                                            alt="">
                                        <div class="price">￥${goodsPrice}</div>
                                        <div class="desc">${goodsName}</div>
                                    </a>
                                </li>`
                    })
                    if (data.message != 'OK') {
                        html = '暂无商品哦,请重新输入关键字哦'
                    }
                    goodsList.innerHTML = html
                    if (page > maxPage) {
                        alert('已经是最后一页啦')
                    }
                    page = page > maxPage ? maxPage : page
                    tips.textContent = `${current}/${maxPage}`
                    if (current == undefined || maxPage == undefined) {
                        tips.textContent = `${0}/${0}`
                    }
                }
            }
        })
    }














    var userName = getCookie('userName')
    if (userName) {
        signUser.style.display = 'block'
        signTips.style.display = 'none'
        var userNameVal = signUser.getElementsByClassName('lg-user')[0]
        userNameVal.innerHTML = `欢迎您,${userName}`
        outUserName.onclick = function () {
            signUser.style.display = 'none'
            signTips.style.display = 'block'
            delCookie('userName')
        }
    }

        // var xhr = new XMLHttpRequest()
        // xhr.open('get', `http://43.138.81.225/demo/php/searchGoodsOrderLimit.php?wd=${wd}&col=${col}&type=${type}&page=${page}&size=${size}`)
        // xhr.send()
        // xhr.onreadystatechange = function () {
        //     if (xhr.readyState == 4 && xhr.status == 200) {
        //         var res = xhr.responseText
        //         var data = JSON.parse(res)
        //         console.log(data)
        //         var { status, message, list, total, maxPage, current } = data;
        //         if (data.status) {
        //             var html = "";
        //             list.forEach((item) => {
        //                 var { goodsId, goodsName, goodsPrice, goodsImg } = item;
        //                 html += `<li>
        //                     <a href="#javaScript;">
        //                         <img src="${goodsImg}"
        //                             alt="">
        //                         <div class="price">￥${goodsPrice}</div>
        //                         <div class="desc">${goodsName}</div>
        //                     </a>
        //                 </li>`
        //             })
        //             goodsList.innerHTML = html
        //             page = page > maxPage ? maxPage : page
        //             tips.textContent = `${current}/${maxPage}`;
        //             pageNext.onclick = function () {
        //                 if (page >= maxPage) {
        //                     alert("已经是最后一页了");
        //                     return false
        //                 }
        //                 page++
        //                 goodsLoad()
        //             }
        //             pagePrev.onclick = function () {
        //                 if (page <= 1) {
        //                     alert("已经是第一页了");
        //                     return false;
        //                 }
        //                 page--
        //                 goodsLoad()
        //             }
        //         }
        //     }
        // }
</script>

</html>